<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.css"/>
    <title>Document</title>
    <style>
        .red{
            background:red;
        }
        .green{
            background:green;
        }

    </style>

</head>
<body>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="panel-title">
                grid-system
            </div>
        </div>
        <!--row 如果要断掉panel的padding:15px 这里必须加一个row-->
        <div class="panel-body">
            <div class="row">
                <div class="container">
                <div class="row green">
                    <div class="col-md-12">
                        .container-container>.col-md-12
                    </div>
                </div>
            </div>
            <div class="container-fluid">
                <div class="row green">
                    <div class="col-md-12">
                        .container-fluid>.col-md-12
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-xs-9">.col-xs-9</div>
                    <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
                    <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-xs-4 green">.col-xs-4</div>
                    <div class="col-xs-4 red col-xs-push-3">.col-xs-4</div>
                </div>
                <div class="row">
                    <div class="col-xs-4 green">.col-xs-4</div>
                    <div class="col-xs-4 green">.col-xs-4</div>
                    <div class="col-xs-4 red col-xs-offset-3">.col-xs-4</div>
                </div>
            </div>
            </div>
        </div>
    </div>

    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="panel-title">排版布局</div>
        </div>
        <div class="panel-body">
            <div class="container">
                <h1>test h1 <span class="small">second text</span></h1>
                <p class="lead">
                    this is a mark <mark>标记内容</mark>
                    <br/>
                    this is a del <del>删除内容</del>
                    <br/>
                    this ia a s <s>无用内容</s><br/>
                    this is a ins <ins>插入内容</ins>
                    <br/>
                    this is a u <u>带下滑线</u><br/>
                    this is a small <small>不需lead强调的</small>
                    <br/>
                    this is a strong <strong>强调信息</strong>
                    this is a strong <em>斜体</em>

                </p>
                <kbd>ctrl + ,</kbd>
                <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
                <p>
                    y = mx + b
                </p>
                <pre>
                    y = mx + b
                </pre>
                <blockquote class=".blockquote">
                    y = mx + b
                </blockquote>
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                </blockquote>
            </div>
        </div>
    </div>

    <div class="panel panel-primary">
    <div class="panel-heading">
        <div class="panel-title">
            table 相关
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">
                        form 相关
                    </div>
                </div>
                <div class="panel-body">
                    <form action="#" role="form" class="form form-horizontal">
                        <div class="form-group">
                            <div class="col-xs-12">
                                <label for="username" class="control-label col-xs-2">
                                    username:
                                </label>
                                <div class="col-xs-10">
                                    <input type="text" placeholder="username" id="username" class="form-control" name="username"/>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-xs-12">
                                <label class="control-label col-xs-2">
                                    password:
                                </label>
                                <div class="col-xs-10">
                                    <input type="password" placeholder="password" class="form-control"/>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-12">
                                <label class="col-xs-2 control-label">Email</label>
                                <div class="col-xs-10">
                                    <p class="form-control-static">email@example.com</p>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-12">
                                <div class="col-xs-10 col-xs-offset-2">
                                    <label class="control-label">
                                        <input type="checkbox"/>
                                        rember me:
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group form-group-lg">
                            <div class="col-xs-12">
                                <div class="col-xs-6">
                                    <label for="" class="btn btn-primary form-control">login(lg)</label>
                                </div>
                                <div class="col-xs-6">
                                    <label for="" class="btn btn-primary form-control">reset(lg)</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-12">
                                <div class="col-xs-6">
                                    <label for="" class="btn btn-primary form-control">login</label>
                                </div>
                                <div class="col-xs-6">
                                    <label for="" class="btn btn-primary form-control">reset</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group form-group-sm">
                            <div class="col-xs-12">
                                <div class="col-xs-6">
                                    <label for="" class="btn btn-primary form-control">login(sm)</label>
                                </div>
                                <div class="col-xs-6">
                                    <label for="" class="btn btn-primary form-control">reset(sm)</label>
                                </div>
                            </div>
                        </div>




                        <div class="form-group">
                            <div class="col-xs-12">
                                <label class="col-xs-2 control-label">Email</label>
                                <div class="col-xs-10">
                                    <p class="form-control-static">email@example.com</p>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="" class="btn btn-primary form-control">login</label>
                            </div>
                            <div class="col-xs-6">
                                <label for="" class="btn btn-primary form-control">reset</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-2 control-label ">Email</label>
                            <div class="col-xs-10">
                                <p class="form-control-static">email@example.com</p>
                            </div>
                        </div>
                    </form>
                </div>


                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-title">form(panel-default)</div>
                    </div>
                    <div class="panel-body">
                        <form action="#" class="form-inline" role="form">
                            <div class="form-group has-success has-feedback">
                                <label class="sr-only control-label">
                                    username:
                                </label>
                                <input class="form-control" type="text" placeholder="feeeback"/>
                                <span class="form-control-feedback">.00</span>
                            </div>
                            <div class="form-group">
                                <label class="control-label">
                                    password:
                                </label>
                                <div class="input-group">
                                    <span class="input-group-addon">$</span>
                            <span class="input-group-addon">
                                <input type="checkbox"/>
                            </span>
                                    <input type="text" class="form-control" placeholder="addon">
                                    <span class="input-group-addon">.00</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">
                                    password:
                                </label>
                                <div class="input-group">
                                    <span class="input-group-addon">$</span>
                            <span class="input-group-addon">
                                <input type="checkbox"/>
                            </span>
                                    <input type="text" class="form-control" placeholder="addon">
                                    <span class="input-group-addon">.00</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="btn btn-success btn-block btn-lg active" disabled>login</div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover table-condensed">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Username</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="success">
                                        <td rowspan="2">1</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr class="warning">
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@TwBootstrap</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td colspan="2">Larry the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">响应式图片</div>
        </div>
        <div class="panel-body bg-success">
            <div class="row">
                <div class="col-xs-12 bg-primary">
                    <img class="img-responsive" src="" alt=""/>

                    <img src="" alt=""/>
                    <img src="" alt=""/><img src="" alt=""/>

                </div>
            </div>
        </div>
    </div>

</body>
</html>